<template>
  <div class="container">
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 精选题库2 -->
      <questions-select />

      <!-- -------------------------- -->
      <!-- Tab栏 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-alert type="info" :closable="false" show-icon
          >数据一共{{ counts }}条
        </el-alert>

        <el-tab-pane label="全部" name="null">
          <questions-list :allList="allList" />
        </el-tab-pane>
        <el-tab-pane label="待审核" name="0">
          <questions-list :allList="allList" />
        </el-tab-pane>
        <el-tab-pane label="已审核" name="1">
          <questions-list :allList="allList" />
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="2">
          <questions-list :allList="allList" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { choice } from "@/api/hmmm/questions";
import QuestionsSelect from "../components/questions-select";
import QuestionsList from "../components/questions-list";

export default {
  components: {
    QuestionsSelect,
    QuestionsList
  },
  mounted() {
    this.getAllSubjects();
  },
  data() {
    return {
      activeName: "null", //Tab栏当前页
      allList: [], // 所有试题列表
      counts: "" //数据总数
    };
  },
  methods: {
    handleClick(tab, event) {
      if (this.activeName === "null") {
        return this.getAllSubjects();
      }
      this.getAllSubjects(this.activeName);
    },
    getAllSubjects(active) {
      choice({
        page: 1,
        pagesize: 5,
        chkState: active
      })
        .then(({ data }) => {
          this.allList = data.items;
          this.counts = data.counts;

          console.log(data);
        })
        .catch(() => {
          this.$message.error("获取所有试题失败！", error);
        });
    }
  }
};
</script>

<style scoped>
.el-card {
  padding: 20px;
  margin: 15px 10px;
}
.el-alert--info.is-light {
  margin-bottom: 15px;
}
::v-deep i.el-alert__icon {
  font-size: 16px !important;
  width: unset;
}
::v-deep span.el-alert__title {
  font-size: 12px !important;
}
</style>
